<script lang="ts" setup>
import type { Consultation01ComponentMeta } from '@/definitions/type'
import { useCompStyleRender } from '@/hooks/useCompStyleRender'
import { usePrefix } from '@/hooks/usePrefix'
import { useDesignStore } from '@/stores'
import { computed } from 'vue'
import './RenderConsultation01.less'

defineOptions({
  name: 'RenderConsultation01',
})
const props = defineProps<{
  render: Consultation01ComponentMeta
}>()

const designStore = useDesignStore()
const platform = computed(() => designStore.config.platform)
const { prefix } = usePrefix()
const { wraperCls, style } = useCompStyleRender(props)
</script>

<template>
  <div :style="style" :class="[prefix('wraper'), prefix(wraperCls), prefix(platform)]">
    <div v-if="platform === 'mobile'" :class="prefix('consultebox')">
      <div :class="prefix('consultetop')">
        <img :src="render.config.avatar" :class="prefix('consulteimg')">
        
        <div :class="prefix('consulteinfo')">
          <div :class="prefix('consultetitle')">
            {{ render.config.nickName }}
          </div>
          <div :class="prefix('consultedesc')">
            {{ render.config.course }}
          </div>
        </div>
      </div>

      <div :class="prefix('consulteguide')">
        {{ render.config.guide }}
      </div>
      <span :class="prefix('consultebtn')">
        {{ render.config.buttonText }}
      </span>
    </div>

    <div v-if="platform === 'pc'" :class="prefix('consultepcbox')">
      <div :class="prefix('consultepctop')">
        <img :src="render.config.avatar" :class="prefix('consultepcimg')">
        
        <div :class="prefix('consultepcinfo')">
          <div :class="prefix('consultepcguide')">
            {{ render.config.guide }}
          </div>
          <div :class="prefix('consultepcdesc')">
            {{ render.config.nickName }} — {{ render.config.course }} 
          </div>
        </div>
      </div>

      <!-- 添加按钮 -->
      <span :class="prefix('consultepcbtn')">
        {{ render.config.buttonText }}
      </span>
    </div>
  </div>
</template>
